<template>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper" data-scroll="2">
            <div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                    <li class="mui-table-view-cell mui-media header">
                        <img :src="'./static/images/userlogo.png'" alt="">
                        <div class="loginBox">
                            <router-link to="/login" tag="span" class="login">{{$store.state.user.name}}</router-link>
                            <span class="el-icon-mobile-phone">{{$store.state.user.phone}}</span>
                        </div>
                    </li>
                    <li class="mui-table-view-cell mui-media welfare">
                        <a ><span class="red-packet el-icon-bank-card"></span><span class="txt">红包</span></a>
                        <a ><span class="gold-coin el-icon-coin"></span><span class="txt">金币</span></a>
                    </li>
                </ul>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-location btn"></span>我的地址</a>
                    </li>
                </ul>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-s-goods btn"></span>金币商城</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-share btn"></span>分享拿20元现金</a>
                    </li>
                </ul>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-phone btn"></span>我的客服</a>
                    </li>                    
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-platform-eleme btn"></span>下载饿了么App</a>
                    </li>                       
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right"><span class="el-icon-s-order btn"></span>规则中心</a>
                    </li>
                </ul>
                <p class="profile">隐私政策</p>
            </div>
        <div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 518px; transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div></div></div>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
    .mui-table-view {
        margin-top: 10px;
    }
    .mui-navigate-right {
        color: #333!important;
        font-size: 16px;
    }
    .update {
        font-style: normal;
        color: #999999;
        margin-right: -25px;
        font-size: 14px;
    }
    .header {
        display: flex;
        height: 110px;
        padding: 25px 15px;
        background-image: linear-gradient(90deg,#0af,#0085ff);
    }
    .header::before,
    .header::after {
        height: 0;
    }
    .header img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .loginBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 18px;
    }
    .login {
        font-size: 21px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 5px;
    }
    .el-icon-mobile-phone {
        font-size: 12px;
        color: #fff;
    }
    .welfare {
        display: flex;
        height: 84px;
        padding: 0;
    }
    .welfare a {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0!important;
        padding: 0;
    }
    .welfare a:nth-child(1) {
        border-right: 1px solid #ddd;
    }
    .red-packet,
    .gold-coin {
        width: 26px;
        height: 26px;
        background: rgb(252, 123, 83);
        border-radius: 50%;
        text-align: center;
        line-height: 26px;
        color: #fff;
        font-size: 16px;
    }
    .gold-coin {
        background: rgb(148, 217, 74);
    }
    .welfare .txt {
        margin-top: 5px;
        font-size: 12px;
        color: #666;
        font-weight: 700;
    }
    .btn {
        margin-right: 8px;
        color: rgb(77, 166, 240);
        font-size: 18px;
    }
    .el-icon-s-goods {
        color: rgb(148, 217, 74);
    }
    .el-icon-share {
        color: rgb(252, 123, 83);
    }
    /* 隐私政策 */
    .profile {
        margin: 18px 0;
        text-align: center;
        color: #4da6f0;
        font-size: 15px;
    }
</style>
